import { View, Text, ScrollView } from "@tarojs/components";
import { Button, Empty, Image, Dialog } from "@nutui/nutui-react-taro";
import Taro, { navigateTo } from "@tarojs/taro";
import { useState, useContext, useEffect } from "react";
import { getExchangeList } from "@/api/course";
import Exchange from "@/components/exchange";
import { LoginContext } from "@/context/login-provider";
const Course = () => {
  const { userInfo } = useContext(LoginContext);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [courseLoading, setCourseLoading] = useState(false);
  const [courseList, setCourseList] = useState<any[]>([]);
  const getList = async (isPage = false) => {
    if (userInfo) {
      setCourseLoading(true);
      Taro.showLoading();
      const res = await getExchangeList({
        pageNo: page,
        pageSize: 10,
      });
      setCourseLoading(false);
      Taro.hideLoading();
      setCourseList(
        isPage ? [...courseList, ...res?.data?.list] : res?.data?.list
      );
      setTotal(res?.data?.total);
    } else {
      setCourseList([]);
    }
  };
  const [codeOpen, setCodeOpen] = useState(false);
  Taro.useDidShow(async () => {
    await getList();
  });
  Taro.usePullDownRefresh(async () => {
    await getList();
    Taro.stopPullDownRefresh();
  });
  useEffect(() => {
    if (page > 1) {
      getList(true);
    }
  }, [page]);
  return courseList?.length > 0 ? (
    <ScrollView
      scrollY
      scrollWithAnimation
      lowerThreshold={100}
      onScrollToLower={() => {
        if (courseList.length < total) {
          setPage(page + 1);
        }
      }}
      className="bg-[#F5F5F5] p-3 h-screen box-border course-page"
    >
      <View className="flex flex-col gap-4">
        {courseList?.map((item) => (
          <View
            key={item.opusUid}
            className="flex justify-between items-center gap-2 rounded-md bg-white p-2"
          >
            <Image
              className="!w-[200rpx] !h-[200rpx]"
              mode="aspectFit"
              src={item.coverImage}
            />
            <View className="flex-1 flex flex-col font-normal">
              <View className="text-base font-semibold line-clamp-1">
                {item.opusName}
              </View>
              <View className="text-sm text-gray-500 line-clamp-2 mt-2 mb-1">
                {item.opusDesc}
              </View>
              <View className="flex justify-between items-center text-sm text-gray-500 mt-2">
                {item.learnerNum} 人学习
                <Button
                  onClick={() =>
                    navigateTo({
                      url: `/pages/course-detail/index?opusUid=${item.opusUid}&from=course`,
                    })
                  }
                  size="small"
                  type="primary"
                >
                  去学习
                </Button>
              </View>
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  ) : !courseLoading ? (
    <View className="flex justify-center items-center min-h-screen bg-white">
      <Empty
        description={
          // userInfo ? (
          <View className="text-sm text-gray-500 mt-4 text-center">
            <View>暂无数据</View>
            {userInfo && (
              <View>
                如果你已经购买，请输入
                <Text
                  className="text-[#673ab7] underline"
                  onClick={() => setCodeOpen(true)}
                >
                  课程兑换码
                </Text>
              </View>
            )}
          </View>
          // ) : (
          //   <View className="text-sm text-gray-500 mt-4 text-center">
          //     暂未登录
          //     {/* <Text
          //       className="text-[#673ab7] underline ml-2"
          //       onClick={() => navigateTo({ url: "/pages/login/index" })}
          //     >
          //       去登录
          //     </Text> */}
          //   </View>
          // )
        }
        image={require("../../assets/course/wu.svg")}
      />
      <Exchange
        codeOpen={codeOpen}
        setCodeOpen={setCodeOpen}
        onExchange={() => getList()}
      />
      <Dialog id="login" />
    </View>
  ) : null;
};

export default Course;
